<template>
  <div class="business-management">
    <h3 style="color: white;">商家账号管理</h3>
    <div class="search-area">
      <a-input v-model:value="searchQuery.id" placeholder="ID" class="search-input" />
      <a-input v-model:value="searchQuery.name" placeholder="账户名" class="search-input" />
      <a-input v-model:value="searchQuery.phone" placeholder="手机号码" class="search-input" />
      <a-input v-model:value="searchQuery.address" placeholder="地址" class="search-input" />
      <a-button type="primary" @click="handleSearch">搜索</a-button>
    </div>
    <table class="business-table">
      <thead>
        <tr>
          <th>头像</th>
          <th>账户ID</th>
          <th>账户名</th>
          <th>手机号码</th>
          <th>地址</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <BusinessRow v-for="business in businesses" :key="business.id" :business="business" />
      </tbody>
    </table>
  </div>
</template>

<script>
import { ref, computed, onMounted } from 'vue';
import BusinessRow from './BusAccountsRow.vue';
import request from '../../../util/request';
import { message } from 'ant-design-vue';

export default {
  name: 'BusinessManager',
  components: {
    BusinessRow,
  },
  setup() {
    const searchQuery = ref({
      id: '',
      name: '',
      phone: '',
      address: '',
    });

    const businesses = ref(
      // 更多商家数据...
      {
        id: 0,
        avatar: '',
        cusName: '',
        cusphone: '',
        cusAddress: '',
      }
    );

    onMounted(() => {
      request.get('/account/list/business').then(res => {
        businesses.value = res.data;
      }).catch(error => {
        message.error('获取商家数据失败:', error);
      });
    });

    // (() => {
    //   return businesses.value.filter(business => {
    //     return (
    //       (searchQuery.value.id === null || business.id === searchQuery.value.id) &&
    //       business.name.includes(searchQuery.value.name) &&
    //       business.phone.includes(searchQuery.value.phone) &&
    //       business.address.includes(searchQuery.value.address)
    //     );
    //   });
    // });

    const handleSearch = () => {
      // console.log('搜索条件:', searchQuery.value);
      request.post('/account/search', {
        userid: searchQuery.value.id,
        username: searchQuery.value.name,
        phone: searchQuery.value.phone,
        address: searchQuery.value.address,
        role: 'business',
      }).then(res => {
        businesses.value = res.data;
      }).catch(error => {
        message.error('搜索失败：', error);
      });
    };

    return {
      searchQuery,
      businesses,
      handleSearch,
    };
  },
};
</script>

<style scoped>
.business-management {
  padding: 24px;
  background: #1a1a1a;
  /* 暗色背景 */
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  color: #ffffff;
  /* 字体颜色为白色 */
}

.search-area {
  display: flex;
  gap: 16px;
  margin-bottom: 24px;
}

.search-input {
  width: 200px;
}

.business-table {
  width: 100%;
  border-collapse: collapse;
}

.business-table th,
.business-table td {
  border: 1px solid #444;
  /* 暗色边框 */
  padding: 8px;
  color: #ffffff;
  /* 字体颜色为白色 */
}

.business-table th {
  background-color: #222;
  /* 暗色表头 */
}
</style>